<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="addData" v-if="p1">新增</el-button>
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny" v-if="p3">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="字典编码" label-width="70px">
              <el-input v-model="tableSearchParam.code" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="字典名称" label-width="90px">
              <el-input v-model="tableSearchParam.name" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" :columns="columns" border
                    v-on:listenToSelection="pHandleSelectionChange">
          <el-table-column label="编码">
            <template slot-scope="scope">
              {{scope.row.value}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              {{scope.row.createdTime}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini"
                         icon="el-icon-edit"
                         v-if="p2"
                         type="success" @click="editData(scope.index,scope.row)">编辑
              </el-button>
              <el-button size="mini"
                         type="danger"
                         v-if="p3"
                         icon="el-icon-close" @click="handleDelete(scope.index,scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </tree-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="actionType=='add'?'新增字典':'修改字典'" :visible.sync="dialogFormVisible" top="10vh">
      <el-form :model="formData" style="width:400px" :rules="rules" ref="ruleForm">
        <el-form-item label="上级字典" :label-width="formLabelWidth">
          <el-select v-model="formData.parentId" placeholder="请选择" no-data-text="暂无数据">
            <el-option
              key="0"
              label="请选择"
              value="0">
            </el-option>
            <el-option
              v-for="item in allData"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字典编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="formData.code" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序码" :label-width="formLabelWidth">
          <el-input v-model="formData.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="actionType=='add'" :loading="loading">保存</el-button>
        <el-button type="primary" @click="handleEdit" v-else :loading="loading">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }
</style>

<script>
  import dictionaryApi from '@/api/dictionaryApi'
  import treeTable from '@/components/TreeTable'
  import treeToArray from './customEval'

  export default {
    created() {
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.dictionary.saveDictory)
      this.p2 = this.permissionValid.validAction(this.permissionValid.permissionRule.dictionary.updateDictory)
      this.p3 = this.permissionValid.validAction(this.permissionValid.permissionRule.dictionary.removeDictory)
      this.initData()
    },
    components: {treeTable},
    data() {
      return {
        p1: false,
        p2: false,
        p3: false,
        func: treeToArray,
        expandAll: true,
        columns: [{
          value: 'label',
          text: '字典名称',
          width: 200
        }],
        data: [],
        args: [null, null, null],
        allData: [],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          parentId: '0',
          code: '',
          name: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '80px',
        formData: {
          parentId: '',
          code: '',
          name: '',
          sort: ''

        },
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          code: [
            {required: true, message: '请输入字典编码', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入字典名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      initData() {
        this.listTableData()
      },
      listTableData() {
        if (this.tableSearchParam.code != '' || this.tableSearchParam.name != '') {
          this.tableSearchParam.parentId = ''
        } else {
          this.tableSearchParam.parentId = '0'
        }
        dictionaryApi.listDictory(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.data = res.list
          this.total = res.total
        }, () => {
        })
      },
      addData() {
        //清空历史值
        this.formData = {
          parentId: '',
          code: '',
          name: '',
          sort: ''

        }
        dictionaryApi.listAll({parentId: '0'}, (res) => {
          this.allData = res
          this.actionType = 'add'
          this.dialogFormVisible = true
        }, () => {
          this.$refs['ruleForm'].resetFields()
        })

      },
      handleAdd() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            dictionaryApi.saveDictory(this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })
      },
      editData(index, row) {
        //清空历史值
        this.formData = {
          parentId: '0',
          code: '',
          name: '',
          sort: ''

        }
        let that = this
        that.actionType = 'edit'
        dictionaryApi.listAll({parentId: '0'}, (res) => {
          this.allData = res
          dictionaryApi.getDictory(row.id, (res1) => {
            that.formData = res1
            that.formData.sort = res1.sort + ''
            that.formData.id = row.id
            that.dialogFormVisible = true
          }, () => {

          })
        }, () => {
        })
      },
      handleEdit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            dictionaryApi.updateDictory(this.formData.id, this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dictionaryApi.deleteSingleDictory(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      searchTableData() {

      },
      pHandleSelectionChange(selection) {
        this.multipleSelection = selection
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dictionaryApi.removeDictory(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
